<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的评价</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .content{}
        .banner{display: -webkit-box;display: box;position: relative;padding: 15px;}
        .banner .left{width: 60px;height: 60px;background-size: cover;background-position: center;}
        .banner .right{padding-left: 15px;-webkit-box-flex: 1;box-flex: 1;}
        .banner .right .top{font-size: 14px;margin-top: 5px;}
        .banner .right .bottom{margin-top: 8px;}
        .banner .right .bottom i{font-size: 20px;color: #ffc10c;margin-right: 3px;}

        .switch{position: relative;font-size: 15px;text-align: center;color: #333;}
        .switch .left{float: left;width: 50%;line-height: 45px;}
        .switch .right{float: right;width: 50%;line-height: 45px;}
        .switch .b-border{clear: both;width: 50%;height: 3px;background-color: #ffc10c;}

        .list{}
        .list ul li{padding: 8px 10px;position: relative;display: -webkit-box;display: box;}
        .list .left{width: 50px;height: 50px;background-size: cover;background-position: center;}
        .list .right{margin-left: 10px;-webkit-box-flex: 1;box-flex: 1;color: #333;}
        .list .right .top{font-size: 15px;margin-top: 5px;}
        .list .right .bottom{overflow: hidden;font-size: 13px;margin-top: 8px;}
        .list .right .bottom .b-left{float: left;}
        .list .right .bottom .b-left .evaluate{color: #ffc10c;margin-right: 5px;}
        .list .right .bottom .b-right{float: right;}

        .receive{display: none;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<header class="header header2">
    <div class="header-fixed">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
        </div>
        <div class="center">我的评价</div>
    </div>
</header>
<div class="content">
    <div class="banner bottom-line">
        <div class="left" style="background-image: url('../img/pic_renter.png')"></div>
        <div class="right">
            <div class="top">亲，当前的累计信用为<span>50</span></div>
            <div class="bottom star"><i class="iconfont icon-star2"></i><i class="iconfont icon-star2"></i></div>
        </div>
    </div>
    <div class="switch bottom-line">
        <div class="left">发布的评价 (<span>50</span>)</div>
        <div class="right">收到的评价 (<span>50</span>)</div>
        <div class="b-border at-left"></div>
    </div>
    <div class="publish list">
        <ul>
            <li class="bottom-line">
                <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                <div class="right">
                    <div class="top">任务名称</div>
                    <div class="bottom">
                        <div class="b-left"><span class="evaluate">已好评</span>服务相当好！</div>
                        <div class="b-right">2016-05-15</div>
                    </div>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                <div class="right">
                    <div class="top">任务名称</div>
                    <div class="bottom">
                        <div class="b-left"><span class="evaluate">已好评</span>服务相当好！</div>
                        <div class="b-right">2016-05-15</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="receive list">
        <ul>
            <li class="bottom-line">
                <div class="left" style="background-image: url('../img/pic_renter.png')"></div>
                <div class="right">
                    <div class="top">任务名称</div>
                    <div class="bottom">
                        <div class="b-left"><span class="evaluate">已好评</span>服务相当好！</div>
                        <div class="b-right">2016-05-15</div>
                    </div>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left" style="background-image: url('../img/pic_renter.png')"></div>
                <div class="right">
                    <div class="top">任务名称</div>
                    <div class="bottom">
                        <div class="b-left"><span class="evaluate">已好评</span>服务相当好！</div>
                        <div class="b-right">2016-05-15</div>
                    </div>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left" style="background-image: url('../img/pic_renter.png')"></div>
                <div class="right">
                    <div class="top">任务名称</div>
                    <div class="bottom">
                        <div class="b-left"><span class="evaluate">已好评</span>服务相当好！</div>
                        <div class="b-right">2016-05-15</div>
                    </div>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left" style="background-image: url('../img/pic_renter.png')"></div>
                <div class="right">
                    <div class="top">任务名称</div>
                    <div class="bottom">
                        <div class="b-left"><span class="evaluate">已好评</span>服务相当好！</div>
                        <div class="b-right">2016-05-15</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
<script>
    $('.switch .left').click(function(){
        var border = $('.switch .b-border');
        if(border.hasClass('at-right')){
            border.removeClass('at-right').addClass('at-left').animate({marginLeft:'0'});
            $('.receive').hide();
            $('.publish').fadeIn();
        }
    });
    $('.switch .right').click(function(){
        var border = $('.switch .b-border');
        if(border.hasClass('at-left')){
            border.removeClass('at-left').addClass('at-right').animate({marginLeft:'50%'});
            $('.publish').hide();
            $('.receive').fadeIn();
        }
    });
</script>
</html>